<template>
  <el-drawer v-model="drawerVisible" :title="drawerTitle" direction="rtl" size="80%" class="cardSetting"
    v-if="drawerVisible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ drawerTitle }}</h4>
      <el-button @click="close">
        取消
      </el-button>
      <el-button type="primary" @click="save">
        保存
      </el-button>
    </template>
    <el-container class="wrap">
      <el-aside width="200px" class="wrap-aside">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="接口测试" name="interface">
            <ul class="card" v-if="cardList.length">
              <li v-for="(item, index) of cardList" :key="index" class="card-item"
                @click="handleCardSelect(item, index)">
                <img :src="item.icon" alt="" />
                <div class="card-item_content">
                  <span class="title">{{ item.title }}</span>
                  <span class="desc">{{ item.desc }}</span>
                </div>
              </li>
            </ul>
            <el-empty description="暂无数据" v-else />
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-main class="wrap-main" ref="listRef">
        <el-row class="list" :gutter="20">
          <el-col v-for="(item, index) of list" :key="item.id" class="list-item" :xl="item.size" :lg="item.size"
            :md="item.size" :sm="item.size" :xs="item.size">
            <div>
              <span class="list-item_left">
                <el-icon class="handle">
                  <Operation />
                </el-icon>
                <span class="title">{{ item.title }}</span>
              </span>
              <span class="list-item_right">
                <el-radio-group v-model="item.size" size="small" class="radio">
                  <el-radio-button label="半屏" :value="12" />
                  <el-radio-button label="全屏" :value="24" />
                </el-radio-group>
                <el-icon class="delete" @click="handleDelete(item, index)">
                  <Delete />
                </el-icon>
              </span>
            </div>
          </el-col>
        </el-row>
        <el-empty description="暂无数据" v-if="!list.length" />
      </el-main>
    </el-container>
  </el-drawer>
</template>

<script setup lang="ts">
import Sortable from "sortablejs"
import { Delete, Operation } from '@element-plus/icons-vue'
import projectView from '@/assets/svgs/projectView.svg'
import interfaceCount from '@/assets/svgs/interfaceCount.svg'
import caseCount from '@/assets/svgs/caseCount.svg'
import sceneCount from '@/assets/svgs/sceneCount.svg'
import { useDebugStore } from '@/store/modules/debug'
const debugStore = useDebugStore()
const drawerVisible = ref(false)
const drawerTitle = ref('卡片设置')
const activeNames = ref('interface')
const listData = [
  {
    id: 0,
    title: '项目概览',
    icon: projectView,
    desc: '统计所在项目的资源及分布的数据统计',
    size: 24
  },
  {
    id: 1,
    title: '接口数',
    icon: interfaceCount,
    desc: '统计接口总数及接口覆盖率和完成率数据统计',
    size: 24
  },
  {
    id: 2,
    title: '接口用例数',
    icon: caseCount,
    desc: '接口用例总数及接口完成情况的数据统计',
    size: 12
  },
  {
    id: 3,
    title: '场景数',
    icon: sceneCount,
    desc: '场景总数及执行和完成的数据统计',
    size: 12
  }
]
const cardList = ref([] as any)
const list = ref([] as any)
const listRef = ref()
/** 打开弹窗 */
const open = async () => {
  drawerVisible.value = true
  cardList.value = !debugStore.getCardList.length && debugStore.getList.length == 4 ? [] : [...debugStore.getCardList]
  list.value = JSON.parse(JSON.stringify(debugStore.getList))
  nextTick(() => {
    initSortable()
  })
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 拖动效果 */
const initSortable = () => {
  if (listRef.value && listRef.value.$el) {
    const navWrap = listRef.value.$el.querySelector('.el-row');
    if (navWrap) {
      new Sortable(navWrap, {
        animation: 150,
        handle: '.handle', // 拖拽手柄
        onEnd: ({ newIndex, oldIndex }) => {
          // 更新数据模型
          const movedTab = list.value.splice(oldIndex, 1)[0];
          list.value.splice(newIndex, 0, movedTab);
        }
      });
    } else {
      console.error('element not found');
    }
  } else {
    console.error('Collapse reference is not valid');
  }
};

/** 左侧卡片选择 */
const handleCardSelect = (data, index) => {
  cardList.value.splice(index, 1)
  const result = listData.find(k => k.title == data.title)
  const isHas = list.value.find(k => k.title == data.title)
  if (!isHas) {
    list.value.push({ ...result })
  }
}

/** 右侧卡片删除 */
const handleDelete = (data, index) => {
  const result = listData.find(k => k.title == data.title)
  list.value.splice(index, 1)
  const isHas = cardList.value.find(k=>k.title == data.title)
  if(!isHas){
    cardList.value.push({ ...result })
  }
  cardList.value.sort((a, b) => a.id - b.id);
}

/** 折叠面板切换 */
const handleChange = () => { }

/** 保存 */
const save = () => {
  debugStore.setCardList(cardList.value)
  debugStore.setList(list.value)
  drawerVisible.value = false
} 
</script>

<style lang="scss">
.cardSetting {

  .el-drawer__header {
    margin-bottom: 0;
  }

  .wrap {
    height: 100%;

    &-aside {
      .card {
        list-style: none;
        margin: 0;
        padding: 0;

        &-item {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;

          &:hover {
            background: #f9f9fe;
          }

          img {
            width: 50px;
            margin-right: 10px;
          }

          &_content {
            display: flex;
            flex-direction: column;

            .title {
              font-size: 14px;
            }

            .desc {
              font-size: 12px;
              color: #aaa;
            }
          }
        }
      }
    }

    &-main {
      background: #f9f9fe;

      .list {
        &-item {
          >div {
            margin: 0 0 20px;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          &_left {
            display: flex;
            align-items: center;

            .handle {
              cursor: pointer;
            }

            .title {
              margin-left: 10px;
            }
          }

          &_right {
            display: flex;
            align-items: center;

            .radio {}

            .delete {
              margin-left: 10px;
              padding: 3px;
              border: 1px solid #e7e3e3;
              border-radius: 4px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

.dark {
  .cardSetting {
    .card-item {
      &:hover {
        background: #454545;
      }
    }

    .wrap-main {
      background: #454545;

      .list-item {
        >div {
          background: #5c5c5c;
        }
      }
    }
  }
}
</style>
